<script setup>
import { reactive } from 'vue';

const form = reactive({
  orderImport: ['张小姐'],
  orderExport: ['张小姐'],
  returnSubmit: 1, // 1:提交人可退回 2:指定人员退回
  orderEnd: 1, // 1:可编辑即可操作 2:指定人员
  restoreOrder: 1, // 1:可编辑即可操作 2:指定人员
  autoRemind: false,
  autoAssign: false,
});

const handlePermissionChange = (type, value) => {
  form[type] = value;
};
</script>

<template>
  <div class="permission-control">
    <div class="permission-item">
      <label class="permission-label">订单导入</label>
      <div class="permission-desc">默认仅机构负责人拥有订单导入权限，也可以指定其他人。</div>
      <div class="permission-value">
        <span v-for="user in form.orderImport" :key="user">{{ user }}</span>
      </div>
    </div>

    <div class="permission-item">
      <label class="permission-label">订单导出</label>
      <div class="permission-desc">默认仅机构负责人拥有订单导出权限，也可以指定其他人。</div>
      <div class="permission-value">
        <span v-for="user in form.orderExport" :key="user">{{ user }}</span>
      </div>
    </div>

    <div class="permission-item">
      <label class="permission-label">退回待提交</label>
      <el-radio-group v-model="form.returnSubmit" @change="val => handlePermissionChange('returnSubmit', val)" class="permission-value">
        <el-radio :label="1">提交人可退回</el-radio>
        <el-radio :label="2">指定人员退回</el-radio>
      </el-radio-group>
      <div class="permission-desc">可设置退回的操作权限</div>
    </div>

    <div class="permission-item">
      <label class="permission-label">订单完结/异常终止</label>
      <el-radio-group v-model="form.orderEnd" @change="val => handlePermissionChange('orderEnd', val)" class="permission-value">
        <el-radio :label="1">可编辑订单即可操作</el-radio>
        <el-radio :label="2">指定人员操作</el-radio>
      </el-radio-group>
    </div>

    <div class="permission-item">
      <label class="permission-label">恢复订单</label>
      <el-radio-group v-model="form.restoreOrder" @change="val => handlePermissionChange('restoreOrder', val)" class="permission-value">
        <el-radio :label="1">可编辑订单即可操作</el-radio>
        <el-radio :label="2">指定人员操作</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<style lang="less" scoped>
.permission-control {
  background: #fff;

  .permission-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;

    &:last-child {
      border-bottom: none;
    }
  }

  .permission-label {
    display: inline-block;
    width: 120px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

  .permission-desc {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
  }

  .permission-value {
    font-size: 14px;
    color: #333;

    span {
      display: block;
      margin-bottom: 5px;
    }

    /deep/ .el-radio {
      margin-right: 20px;
    }
  }
}
</style>